<template>
	<view class="invoice" :data-theme="theme">
		<view class="bg_color" style="padding: 24rpx 24rpx;">
			<u-search v-model="customer" @custom="searchProduct" @search="searchProduct" placeholder="请输入客户名称"
				actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
		</view>
		<!-- 发票类型 -->
		<u-tabs :scrollable="false" :list="tabList" :current="currentIndex" @click="tabClick"
			:activeStyle="{color:bgColor}" :lineColor="bgColor">
		</u-tabs>
		<!-- <tab-bar style="background-color: #FFF;" :tabList="tabList" :tabIndex.sync="currentIndex"></tab-bar> -->
		<!-- 发票筛选 -->
		<view style="background-color: #fff;">
			<!-- <u-row customStyle="padding: 0px 30rpx;"> -->
			<view style="display: flex; flex-flow: row;justify-content: space-around;height: 40px;line-height: 40px;">
				<uni-datetime-picker v-model="range" type="daterange" @change="calendarConfirm" :color="bgColor"
					@close="calendarShow = false">
					<view style="display: flex;flex: 1;justify-content: center;"
						:style="{color:calendarShow?bgColor:null}" @click="calendarShow = true">
						<view style="font-size: 14px;margin-right: 6rpx;">申请日期</view>
						<u-icon :name="calendarShow?'arrow-up-fill':'arrow-down-fill'" size="12"
							:color="calendarShow?bgColor:''"></u-icon>
					</view>
				</uni-datetime-picker>
				<picker model="selector" @change="invoiceTypeConfirm" range-key="label" :value="invoiceTypeIndex"
					:range="invoiceTypeColumns" @cancel="cancelPicker"
					style="display: flex;justify-content: center;flex: 1;">
					<view style="display: flex;flex: 1;justify-content: center;"
						:style="{color:invoiceTypeShow?bgColor:null}" @click="invoiceTypeShow = true">
						<view style="font-size: 14px;margin-right: 6rpx;">发票类型</view>
						<u-icon :name="invoiceTypeShow?'arrow-up-fill':'arrow-down-fill'" size="12"
							:color="invoiceTypeShow?bgColor:''"></u-icon>
					</view>
				</picker>
				<picker model="selector" @change="invoiceStatusConfirm" range-key="label" :value="invoiceStatusIndex"
					:range="invoiceStatusColumns" @cancel="cancelPicker"
					style="display: flex;justify-content: center;flex: 1;">
					<view style="display: flex;flex: 1;justify-content: center;"
						:style="{color:invoiceStatusShow?bgColor:null}" @click="invoiceStatusShow = true">
						<view style="font-size: 14px;margin-right: 6rpx;">开票状态</view>
						<u-icon :name="invoiceStatusShow?'arrow-up-fill':'arrow-down-fill'" size="12"
							:color="invoiceStatusShow?bgColor:''"></u-icon>
					</view>
				</picker>
			</view>
			<!-- </u-row> -->
		</view>
		<!-- 开票列表 -->
		<swiper class="tab-view" :duration="300" :current.sync="currentIndex" @change="swiperChange">
			<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;">
				<scroll-view :scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
					style="height: 100%; overflow: hidden;" @scrolltolower="scrolltolowerFn">
					<swiper-page-invoice class="swiper-page" :bgColor="bgColor" @isAllChecked="isAllCheck" :tab="tab"
						ref="tab" @toDetails="toDetails" @toConfirm="toConfirm" @checkboxChange="checkboxChange"
						@InvoceCancel="InvoceCancel"></swiper-page-invoice>
				</scroll-view>
				<!-- <swiper-page-invoice class="swiper-page" :bgColor="bgColor" :tab="tab" ref="tab" @toDetails="toDetails"
					@toConfirm="toConfirm" @checkboxChange="checkboxChange"
					@InvoceCancel="InvoceCancel"></swiper-page-invoice> -->
			</swiper-item>
		</swiper>


		<!-- 申请开票 -->
		<view v-if="currentIndex == 0 || currentIndex == 1"
			style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<view style="display: flex;">
				<view style="flex: 1;">
					<view
						style="display: flex; font-size: 16px;justify-content: space-around;align-items: center;line-height: 70rpx;">
						<!-- <u-checkbox-group v-model="allSelect" placement="column" @change="allSelectChange">
							<u-checkbox :activeColor="bgColor" shape="circle" :name="1" label="全选"></u-checkbox>
						</u-checkbox-group> -->
						<checkbox-group @change="allSelectChange">
							<label class="uni-list-cell uni-list-cell-pd" style="display: flex;line-height: 34rpx;">
								<view>
									<checkbox :value="'1'" :checked="isAllChecked" />
								</view>
								<view>全选</view>
							</label>
						</checkbox-group>

						<view style="display: flex;margin-right: 20px;">
							<span>已选</span>
							<span style="margin-left: 10px;"
								v-if="tabList && tabList[currentIndex] && tabList[currentIndex].checkboxValue"
								:style="{color:bgColor}">{{tabList[currentIndex].checkboxValue.length ? tabList[currentIndex].checkboxValue.length : '0'}}</span>
						</view>
					</view>
				</view>
				<view style="flex: 1;">
					<button v-if="currentIndex == 0" @click="requestInvoice(1)" class="bg_color"
						style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
						:color="bgColor">申请开票明细</button>
					<button v-else @click="requestInvoice(2)" class="bg_color"
						style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
						:color="bgColor">重发开票明细</button>
				</view>
			</view>
		</view>
		<view>
			<!-- ------------------------- -->
			<!-- 日期组件 -->
			<!-- <u-calendar :defaultDate="calendar.defaultDate" :maxDate="calendar.maxDate" :minDate="calendar.minDate"
				:monthNum="calendar.monthNum" :color="bgColor" :show="calendarShow" :mode="'range'"
				:closeOnClickOverlay="true" @confirm="calendarConfirm" @close="calendarShow = false">
			</u-calendar> -->

			<!-- 发票类型 -->
			<!-- <u-picker :defaultIndex="invoiceTypeIndex" :show="invoiceTypeShow" :columns="invoiceTypeColumns"
				:closeOnClickOverlay="true" @confirm="invoiceTypeConfirm" @close="invoiceTypeShow = false"
				@cancel="invoiceTypeShow = false" keyName="label">
			</u-picker> -->

			<!-- 开票状态 -->
			<!-- <u-picker :defaultIndex="invoiceStatusIndex" :show="invoiceStatusShow" :columns="invoiceStatusColumns"
				:closeOnClickOverlay="true" @confirm="invoiceStatusConfirm" @close="invoiceStatusShow = false"
				@cancel="invoiceStatusShow = false" keyName="label">
			</u-picker> -->
		</view>
		<!-- //消息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import tabBar from '@/components/tab-bar/tab-bar.vue';
	import swiperPageInvoice from "../components/nvue-swiper-page-invoice.nvue"
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	import animationType from '@/utils/animationType.js'
	import {
		updateInvoceInvoicingApi,
		updateInvoceRevokeApi
	} from '@/api/invoce.js'
	let app = getApp();
	export default {
		components: {
			swiperPageInvoice,
			// tabBar
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				customer: "", //搜索发票
				tabList: [],
				currentIndex: 0,
				allSelect: [0],
				//---
				calendarShow: false, //时间日期选择框
				calendar: {
					minDate: '',
					maxDate: '',
					defaultDate: [],
					monthNum: 13,
				},
				//---
				// invoiceTypeIndex: [0], //默认选择
				invoiceTypeShow: false, //发票类型选择
				invoiceTypeColumns: [{
						label: '全部',
						id: 0
					}, {
						label: '普通发票',
						id: 1
					},
					{
						label: '专用发票',
						id: 2
					}
				],
				invoiceTypeIndex: 0,
				//---
				invoiceStatusIndex: 0, //状态默认选择
				invoiceStatusShow: false, //开票状态选择
				invoiceStatusColumns: 
					[{
							label: '全部',
							id: ''
						}, {
							label: '正常',
							id: 1
						},
						{
							label: '被客诉',
							id: 2
						}
					]
				,
				range: [],
				isAllChecked: false, //全选状态
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.tabList = [{
					id: "tab11",
					name: "待开票",
					type: 1,
					checkboxValue: [],
				},
				{
					id: "tab12",
					name: "开票中",
					type: 2,
					checkboxValue: [],
				},
				{
					id: "tab13",
					name: "已完成",
					type: 3,
					checkboxValue: [],
				},
			];
			//加载日期组件数据
			this.chooseTimed();
		},
		onShow() {
			//初始化页面
			if (this.$refs.tab) {
				for (let item of this.$refs.tab) {
					item.getProductList();
				}
				this.$refs.tab[2].getsuccessList();
			}
		},
		methods: {
			//申请/重发开票明细，
			async requestInvoice(type) {
				let checkboxValue = this.tabList[this.currentIndex].checkboxValue;
				if (checkboxValue.length == 0) {
					this.showToast("warning", "请选择应开发票");
					return;
				}
				if (type == 1) {
					//申请
					await updateInvoceInvoicingApi(checkboxValue); // 待开票=> 开票中
					this.$refs.tab[0].getProductList();
					this.$refs.tab[1].getProductList();
					this.$refs.tab[0].checkboxAllSelect(true);
					this.$refs.tab[1].checkboxAllSelect(true);
				} else {
					//重发
					await updateInvoceRevokeApi(
						checkboxValue
					);
					this.$refs.tab[0].getProductList();
					this.$refs.tab[1].getProductList();
					this.$refs.tab[0].checkboxAllSelect(true);
					this.$refs.tab[1].checkboxAllSelect(true);
				}
			},
			// 发票类型选择
			// invoiceTypeConfirm(index) {
			// 	let list = index.value[0].id;
			// 	this.invoiceTypeShow = false;
			// 	this.$refs.tab[this.currentIndex].invoiceTypeProduct(list);
			// },
			invoiceTypeConfirm(ele) {
				let i = ele.detail.value;
				this.invoiceTypeIndex = i;
				let list = this.invoiceTypeColumns[i].id;
				this.invoiceTypeShow = false;
				this.$refs.tab[this.currentIndex].invoiceTypeProduct(list);
			},
			
			// 发票状态选择
			// invoiceStatusConfirm(index) {
			// 	let list = index.value[0].id;
			// 	this.invoiceStatusShow = false;
			// 	this.$refs.tab[this.currentIndex].invoiceStatusProduct(list);
			// },
			invoiceStatusConfirm(ele) {
				let i = ele.detail.value;
				let list = this.invoiceStatusColumns[i].id;
				this.invoiceStatusShow = false;
				this.$refs.tab[this.currentIndex].invoiceStatusProduct(list);
			},
			
			cancelPicker() {
				this.invoiceTypeShow = false;
				this.invoiceStatusShow = false;
			},
			
			//日期选择确认
			calendarConfirm(dates) {
				let list = dates;

				this.calendarShow = false;
				this.calendar.defaultDate = dates;
				this.$refs.tab[this.currentIndex].calendarProduct(list);
			},
			//滚动加载更多
			scrolltolowerFn() {
				this.$refs.tab[this.currentIndex].scrolltolowerFn();
			},
			//更新全选按钮状态
			updateAllSelectState(index) {
				let i = index == null ? this.currentIndex : index;
				if (this.tabList[i].checkboxValue.length > 0) {
					this.allSelect = [1];
				} else {
					this.isAllChecked = false;
					this.allSelect = [];
				}
			},
			isAllCheck(value) {
				this.isAllChecked = value;
			},

			//多选按钮事件
			allSelectChange(checkboxValue) {
				// let page = this.$refs.tab[this.currentIndex];
				// if (checkboxValue.length > 0) {
				// 	page.checkboxAllSelect();
				// } else {
				// 	page.checkboxAllSelect(true);
				// }
				let page = this.$refs.tab[this.currentIndex];
				if (checkboxValue.detail.value.length > 0) {
					page.checkboxAllSelect();
				} else {
					page.checkboxAllSelect(true);
				}
			},
			//多选
			checkboxChange(checkboxValue) {
				this.tabList[this.currentIndex].checkboxValue = checkboxValue;
				this.updateAllSelectState();
			},
			//取消开票
			InvoceCancel() {
				this.$refs.tab[1].getProductList();
			},
			//搜索商品
			searchProduct(value) {
				//调用当前选择的类型页面查询方法
				this.$refs.tab[this.currentIndex].searchProduct(value);
			},
			tabClick(item) {
				this.currentIndex = item.index;
				this.updateAllSelectState();
			},
			swiperChange(e) {
				let page = this.$refs.tab[this.currentIndex];
				this.updateAllSelectState(e.detail.current);
				page.checkboxAllSelect(true); //清空上次所算的 重要！
			},
			toDetails(item) {
				if (this.currentIndex == 2) {
					//已完成 发票详情
					this.goPage(`/pages/invoice/invoiceDetails/invoiceDetails?id=${item.invoiceNumber}`);
				} else {
					//申请详情
					this.goPage(`/pages/invoice/invoiceRequestDetails/invoiceRequestDetails?id=${item.id}`);
				}
			},
			toConfirm(item) {
				this.goPage(`/pages/invoice/confirmInvoicing/confirmInvoicing?id=${item.id}`);
			},
			goPage(url) {
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url
				})
			},
			// 设置默认日期，最大值为今天，最小值为去年今天
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				let minyear = year - 1;
				this.calendar.minDate = minyear + '-' + month + '-' + day;
				this.calendar.maxDate = year + '-' + month + '-' + day;
				this.calendar.defaultDate = year + '-' + month + '-' + day;
			},
			showToast(type, message) {
				this.$refs.uToast.show({
					type: type,
					message,
					message,
					complete() {}
				})
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	.page {
		flex: 1;
	}

	/* #endif */
	.invoice {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
</style>